import { defineComponent, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getServies } from "@/api/servies";
import { getCommitWordCloud } from "@/api/comment";
import AnmineItem from "@/components/AnmineItem";
import Echarts from "@/components/ECharts";
import WordsCloud from "@/components/WorldsCloud";
import ServieItem from "@/components/ServieItem";
import "./style.scss";

export default defineComponent({
  name: "servie",
  setup() {
    const route = useRoute();

    const state = reactive({
      anime: route.params,
      list: [],
      commentList: [],
      options: {},
      showChart: false,
      servies: [],
      view: [],
      danmaku: [],
      reply: [],
      coin: [],
      showDetail: false,
    });

    const router = useRouter();

    const getOptions = () => {
      const options = {
        title: {
          text: "剧集数据统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["播放量", "弹幕量", "评论量", "硬币量", "分享量", "点赞量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: [0, 0.01],
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "播放量",
            type: "line",

            data: [],
          },
          {
            name: "弹幕量",
            type: "line",

            data: [],
          },
          {
            name: "评论量",
            type: "line",

            data: [],
          },
          {
            name: "分享量",
            type: "line",

            data: [],
          },
          {
            name: "点赞量",
            type: "line",
            data: [],
          },
        ],
      };

      state.servies.forEach((item, i) => {
        // @ts-ignore
        options.xAxis.data.push(`第${i + 1}集`);
        // @ts-ignore
        options.series[0].data.push(item.view);
        // @ts-ignore
        options.series[1].data.push(item.danmaku);
        // @ts-ignore
        options.series[2].data.push(item.reply);
        // @ts-ignore
        options.series[3].data.push(item.share);
        // @ts-ignore
        options.series[4].data.push(item.like);
      });
      state.options = options;
      state.showChart = true;
    };

    const getServiesByIds = async (idStr: string) => {
      let ids: any[] = [];
      if (idStr) {
        ids = idStr.split(",");
      }
      ids = ids.map((item) => parseInt(item));

      const param = {
        page: 1,
        pageSize: 100,
        sort: "pubdate",
        query: {
          cid: ids,
        },
      };

      const res = await getServies(param);

      state.view = res.rows
        .map((item: any) => item.view)
        .sort((a: any, b: any) => {
          return b - a;
        });

      state.danmaku = res.rows
        .map((item: any) => item.danmaku)
        .sort((a: any, b: any) => {
          return b - a;
        });

      state.reply = res.rows
        .map((item: any) => item.reply)
        .sort((a: any, b: any) => {
          return b - a;
        });

      state.coin = res.rows
        .map((item: any) => item.coin)
        .sort((a: any, b: any) => {
          return b - a;
        });
      state.servies = JSON.parse(JSON.stringify(res.rows));
      getOptions();
    };

    const handleBack = () => {
      router.go(-1);
    };

    const getWordCloudData = async (id: any) => {
      const res = await getCommitWordCloud(id);
      state.list = res;
      if (state.list.length > 200) {
        state.commentList = res.slice(0, 200);
      }
    };
    onMounted(() => {
      getWordCloudData(route.params.aid);
      const idStr = route.params.cids;
      getServiesByIds(idStr.toString());
    });

    return () => {
      return (
        <div class="servie full">
          <div class="header">
            <div class="title">{state.anime.name}剧集统计</div>
            <span>
              <a-button onClick={handleBack}>返回</a-button>
            </span>
          </div>
          <div class="row-item" style="height: 20rem">
            <AnmineItem data={state.anime} />
          </div>

          <div class="row-item" style="height: 28.5rem; border-radius: 1rem">
            <a-card hoverable bordered style="width: 100%">
              {state.showChart ? <Echarts options={state.options} /> : ""}
            </a-card>
          </div>

          <div class="row-item" style="height: 50rem; padding: 1rem">
            {state.list.length > 0 ? <WordsCloud list={state.list} /> : ""}
          </div>
          <div class="servie-con">
            {state.servies.map((item) => {
              return <ServieItem data={item} />;
            })}
          </div>
        </div>
      );
    };
  },
});
